<template>
  <div id="app">
    <router-view/>
    <!-- 圆球拖拽 -->
    <div
      class="custom"
      id="drag"
      @click="goShare"
      @touchstart = "down"
      @touchmove = "move"
      @touchend = "end"
    >
      <i class="iconfont icon-lianxi"></i>
    </div>
    
  </div>
</template>



<script>
export default {
  data(){
    return {
      flags:false,
      position:{x:0,y:0},
      dx:"",
      dy:"",
      nx:"",
      ny:"",
      maxW:0,
      maxH:0,
    }
  },
  methods:{
    goShare(){

    },
    // 实现移动端拖拽
    down(){
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      this.dx = touch.clientX
      this.dy = touch.clientY
      // console.log(this.dx)
      // console.log(this.dy)

    },
    move(event){
      // 页面会滑动
     event.preventDefault();//否则页面就会一起滑动

      //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
      let drag = document.querySelector("#drag");
      if (this.flags) {
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }

        this.nx = touch.clientX - this.position.x;
        this.ny = touch.clientY - this.position.y;
        //左右范围
        if (this.nx < 0) {
          this.nx = 0;
        } else if (this.nx > this.maxW) {
          this.nx = this.maxW;
        }
        //上下范围
        if (this.ny < 0) {
          this.ny = 0;
        } else if (this.ny >= this.maxH) {
          this.ny = this.maxH;

        }
        drag.style.left = this.nx-30 + "px";
        drag.style.top = this.ny-30 + "px";
        // drag.style.right = this.nx-60 + "px";
        // drag.style.bottom = this.ny-60 + "px";
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener(
          "touchmove",
          function() {
            // event.preventDefault();
          },
          false
        );
      }
    },
    end(){
      this.flags  = false;
    }
  },
  mounted() {
    document.body.style.background = "#f2f3f5";
    this.maxW =document.body.clientWidth;
    this.maxH= document.documentElement.clientHeight
    
  },
}
</script>




<style lang="scss">
// @import "./styles/iconfont.wxss";

.iconfont{
  font-size: 30px;
}
.custom{
  height: 60px;
  width: 60px;
  line-height: 60px;
  border-radius: 100%;
  background: #007aff;
  text-align: center;
  color: #fff;
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 10;
}
</style>
